<template>
  <div>
    <!-- 头部导航栏 -->
    <div class="header">
      <van-nav-bar title="订单" />
    </div>
    <!-- 订单详情 -->
    <div class="content" style="margin-bottom: 60px">
      <van-tabs v-model="activeName">
        <van-tab title="全部订单" name="全部订单">
          <template>
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
              <Card
                :order-list="orderList"
                :length="length"
                @change="change"
                @showProgressDialog="showProgressDialog"
              ></Card>
            </van-pull-refresh>
          </template>
        </van-tab>
        <van-tab title="未支付" name="未支付">
          <template>
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
              <Card
                :order-list="orderList1"
                :length="length1"
                @change="change"
                @showProgressDialog="showProgressDialog"
              ></Card>
            </van-pull-refresh>
          </template>
        </van-tab>
        <van-tab title="已支付" name="已支付">
          <template>
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
              <Card
                :order-list="orderList2"
                :length="length2"
                @change="change"
                @showProgressDialog="showProgressDialog"
              ></Card>
            </van-pull-refresh>
          </template>
        </van-tab>
        <van-tab title="未发货" name="未派单">
          <template>
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
              <Card
                :order-list="orderList3"
                :length="length3"
                @change="change"
                @showProgressDialog="showProgressDialog"
              ></Card>
            </van-pull-refresh>
          </template>
        </van-tab>
        <van-tab title="已发货" name="已派单">
          <template>
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
              <Card
                :order-list="orderList4"
                :length="length4"
                @change="change"
                @showProgressDialog="showProgressDialog"
              ></Card>
            </van-pull-refresh>
          </template>
        </van-tab>
      </van-tabs>
    </div>
    <van-share-sheet v-model="showShare" title="选择支付方式" :options="options" @select="onSelect" />
    <van-dialog
      v-model="showProgress"
      closeOnClickOverlay
      style="max-height: 70%!important;overflow: scroll"
    >
      <Timeline class="timeline" :progress="progressInfo"></Timeline>
    </van-dialog>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
import { get } from "@/http/axios";
import Card from '@/components/orderCard.vue'
import Timeline from '@/components/timeline'
import { Toast } from 'vant';
export default {
  components: { Card, Timeline },
  data() {
    return {
      activeName: "",
      orderList: [],
      orderList1: [],
      orderList2: [],
      orderList3: [],
      orderList4: [],
      length: 0,
      length1: 0,
      length2: 0,
      length3: 0,
      length4: 0,
      customerId: "",
      showShare: false,
      isLoading: false,
      options: [
        { name: '支付宝支付', icon: require('@/assets/alipay.jpg') },
        { name: '微信支付', icon: require('@/assets/wechat.jpg') },
        { name: '银行卡支付', icon: require('@/assets/yinlian.jpg') }
      ],
      orderId: 0,
      order: {},
      // 物流信息
      progressInfo: [],
      showProgress: false,
    };
  },
  computed: {
  },
  methods: {
    //获取用户订单数据
    async queryOrder() {
      this.orderList1 = []
      this.orderList2 = []
      this.orderList3 = []
      this.orderList4 = []
      let params = {
        pagenum: 1,
        pagesize: 999,
        user_id: JSON.parse(localStorage.getItem('userInfo')).id,
      };
      await this.axios.get('orders', { params }).then(res => {
        if (res.data.meta.status === 200) {
          this.length = res.data.data.total
          this.orderList = res.data.data.goods
          console.log(this.orderList);
          for (let index = 0; index < this.orderList.length; index++) {
            const element = this.orderList[index];
            if (element.pay_status === '0') {
              this.orderList1.push(element)
            } else if (element.pay_status === '1') {
              this.orderList2.push(element)
              if (element.pay_status === '1' && element.is_send == '否') {
                this.orderList3.push(element)
              } else if (element.pay_status === '1' && element.is_send == '是') {
                this.orderList4.push(element)
              }
            }
          }
          this.length1 = this.orderList1.length
          this.length2 = this.orderList2.length
          this.length3 = this.orderList3.length
          this.length4 = this.orderList4.length
          this.isLoading = false
        } else {
          Toast.fail(res.data.meta.msg)
          this.isLoading = false
        }
      })
        .catch(rej => {
          console.log(rej);
          this.isLoading = false
        })
    },
    change(value) {
      console.log(value);
      this.showShare = value.isShow
      this.orderId = value.order.order_id
      this.order = value.order
    },
    onSelect(option, index) {
      console.log(this.order);
      let data = JSON.parse(JSON.stringify(this.order))
      data.update_time = Date.parse(new Date()) / 1000,
        data.order_number = 1
      switch (index) {
        case 0:
          data.order_pay = '1'
          data.pay_status = '1'
          break;

        case 1:
          data.order_pay = '2'
          data.pay_status = '1'
          break;

        case 2:
          data.order_pay = '3'
          data.pay_status = '1'
          break;

      }
      console.log(data);
      this.axios.put(`orders/${this.orderId}`, data).then(res => {
        this.showShare = false
        Toast.success('支付成功');
        this.queryOrder()
      })
    },
    async showProgressDialog() {
      // 供测试的物流单号：1106975712662
      const { data: res } = await this.axios.get('/kuaidi/1106975712662')
      console.log(res);
      if (res.meta.status !== 200) {
        return this.$message.error('获取物流进度失败!')
      }
      this.progressInfo = res.data
      this.showProgress = true
    },
    onRefresh() {
      this.isLoading = true
      this.queryOrder()
    },
  },
  mounted() {
  },
  created() {
    this.queryOrder()
  },
  filters: {

  },
};
</script>

<style scoped>
::v-deep .van-tabs__content{
  height: 80vh;
  overflow: scroll;
}
</style>